<template>
	<view class="vote">
		<template v-if="dataForm.pk_id?true:false">
			<sww-swipe :list="swipeList" indicatorDots autoplay></sww-swipe>
			<count-down ref="down_view" :start="dataForm.start_date" :end="dataForm.end_date" @needInit="$initPage"
				@getStatus="getStatus" />
			<view class="title">
				<view class="title-name">
					{{dataForm.name}}
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="u-reset-button" open-type="share">
					<view class="iconfont iconfont-e739 icon"></view>
				</button>
				<!-- #endif -->
			</view>
			<view class="information">
				<view class="information-item">
					<text>参选者</text>
					<text class="item-num">{{dataForm.online_player_count || 0}}</text>
				</view>
				<view class="information-item">
					<text>累计投票</text>
					<text class="item-num">{{dataForm.record_count || 0}}</text>
				</view>
				<view class="information-item">
					<text>人气</text>
					<text class="item-num">{{dataForm.view_count || 0}}</text>
				</view>
			</view>
			<option-list :dataForm="dataForm" :activityStatus="activityStatus" :activityId="activityId"
				v-if="activityId > 0" @voteFinish="voteFinish" @toLogin="toLogin"></option-list>
		
		</template>

	</view>

</template>

<script>
	import countDown from '../components/countDown.vue'
	import optionList from '../components/optionList.vue'
	import {
		common
	} from '../components/common.js'
	export default {
		mixins: [common],
		props: {
			activityId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				activityStatus: 3,
				swipeList: [],
				dataForm: {},
			}
		},
		components: {
			countDown,
			'option-list': optionList
		},
		mounted() {
			this.$login('$initPage', null, '$initPage').then(() => {
				this.$initPage()
			})
		},
		methods: {
			$initPage() {
				this.$loading()
				this.$resPost('GetVoteInfoDetails', {
					pk_id: this.activityId || this.dataForm.pk_id,
					name: this.searchName || '',
				}).then(({
					data
				}) => {
					this.$emit('getForm', {
						is_enroll: data.is_enroll,
						details: data.details,
						prize:data.prize,
						start_date: data.start_date,
						end_date: data.end_date
					})
					let swipeList = []
					if (data.img) {
						data.img.split(',').forEach(item => {
							swipeList.push({
								img: item
							});
						});
					}
					this.swipeList = [].concat(swipeList)
					let useSendNum = this.getUseNum(data)
					this.dataForm = {
						...data,
						details: '',
						useSendNum: useSendNum,
						voted_count: data.voted_count || 0,
						voted_num: data.voted_num || 0
					}
					this.$nextTick(() => {
						this.$refs.down_view.init()
					})
					this.$hide()
				})
			},
			toLogin() {
				this.$login('$initPage')
			},
			getStatus(type) {
				this.activityStatus = type
			},
			// 确定投票
			voteFinish(obj) {
				this.dataForm.useSendNum -= obj.num
				this.dataForm.voted_count += obj.num
				if (obj.name) {
					this.dataForm[obj.name] += obj.num
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		width: 100%;
		background-color: #fff;
		display: flex;
		padding: 20rpx;

		.title-name {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			flex: 1;
			overflow: hidden;
			line-height: 46rpx;
			margin-right: 20rpx;
		}

		.icon {
			border-left: 2px solid #f1f1f1;
			padding: 0 20rpx;
			font-size: 60rpx;
			color: #E61414;
		}
	}

	.information {
		width: 100%;
		height: 126rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;

		.information-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.item-num {
				font-weight: bold;
			}
		}
	}



</style>
